<!--
 * @Author: your name
 * @Date: 2021-08-04 14:35:51
 * @LastEditTime: 2021-08-13 19:48:35
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \niushop\src\views\Shouye\gouwuche.vue
-->
<template>
  <div class="xhz">
    <header>购物车列表</header>
    <div class="maidongxi">
      <van-checkbox-group v-model="selGoods">
        <div class="carditem" v-for="(item, index) in list" :key="index">
          <van-checkbox :name="item" class="xkk" ></van-checkbox>
            <van-card
              :price="item.current_price+'元'" 
              :desc="'剩余'+item.goods_number"
              :title="item.title"
              :thumb="item.img_small_logo"
            >
              <template #footer>
                <van-stepper :value="item.cart_number"  min="1" 
                max="8"
                disabled
                :name="item.goods_id"
                 />
                <van-button 
                  color="crimson"
                  @click="del(item)"
                >删除</van-button>
              </template>
          </van-card>
        </div>
      </van-checkbox-group>
    </div>
    <van-submit-bar :price="total" button-text="提交订单" @submit="onSubmit">
      <van-checkbox v-model="checked" @click="gbzt">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
export default {
  data(){
    return{
      checked:false,
      list:[],
      is_select:false,
      selGoods:[],
      total:0,
      val:1
    }
  },
 mounted(){
      this.changelist()
  },
  watch:{
      selGoods:{
        handler(list){
          this.total=0
          list.forEach(e => {
            this.total+=e.current_price*e.cart_number*100
          });
          this.checked=list.length===this.list.length&this.list.length>0
        },
        deep:true
      },
      list:{
        handler(){
          this.checked=false
          
        },
        deep:true
      }
  },
  methods:{
    changelist(){
       this.$http({
          method:"get",
          path:"/cart/list",
          params:{
            id:window.sessionStorage.id
          }
        }).then(res=>{
          this.list=res.data.cart
        })

    },
    onSubmit(){
      if(this.total){
        this.$http({
        method:"post",
        path:"cart/pay",
        params:{
          id:window.sessionStorage.id
        }
      }).then(res=>{
       this.$toast(res.data.message)
      })
      }
    },
    del(e){
     this.$http({
        path:"/cart/remove",
        method:"get",
        params:{
          id:window.sessionStorage.id,
          goodsId:e.goods_id
        }
      }).then(
        ()=>{
          
          this.changelist()
          this.total=0
          
        }
      )
   
    },
    
    gbzt(){
      if(this.checked){
        this.selGoods=this.list
      }else{
        this.selGoods=[]
      }
    },

  },

  
}
</script>

<style scoped>
header{
   height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      font-weight: 600;
      color: hotpink;
      background: white;
      margin-bottom: 20px;
}
.xhz{
  background: #f5f5f565;
  margin-bottom: 50px;
  

}
.carditem{
  display: flex;
  padding: 10px;
  align-items: center;
  background: white;
   margin-bottom: 10px;
}
.van-card{
  flex: 1;
  background: #eee; 
  
}
.xkk{
  padding:10px;
 
}
.van-submit-bar{
   position: fixed;
   bottom: 50px;
}
</style>